﻿<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<meta http-equiv="X-UA-Compatible" content="IE=edge">
   		 <meta name="viewport" content="width=device-width, initial-scale=1">
		<title></title>
		<link rel="stylesheet" href="css/bootstrap.css" />
		<link rel="stylesheet" href="css/means.css" />
		<link rel="stylesheet" href="css/mui.min.css" />
		<link rel="stylesheet" href="css/app.css" />
		<link rel="stylesheet" href="css/mui.picker.min.css" />
		
		<link rel="stylesheet" type="text/css" href="css/app.css" />
		<link href="css/mui.picker.css" rel="stylesheet" />
		<link href="css/mui.poppicker.css" rel="stylesheet" />
		<style type="text/css">
			a:hover{
				text-decoration: none;
			}
			html,
			body,
			.mui-content {
				height: 0px;
				margin: 0px;
				background-color: #efeff4;
			}
			h5.mui-content-padded {
				margin-left: 3px;
				margin-top: 20px !important;
			}
			h5.mui-content-padded:first-child {
				margin-top: 12px !important;
			}
			.mui-btn {
				font-size: 16px;
				padding: 8px;
				margin: 3px;
			}
			.ui-alert {
				text-align: center;
				padding: 20px 10px;
				font-size: 16px;
			}
			* {
				-webkit-touch-callout: none;
				-webkit-user-select: none;
			}
			#showUserPicker{
				width: 30%;
				margin-top: -50px;
				height: 40px;
				margin-left: 210px;
			}
			.mui-btn {
				font-size: 16px;
				padding: 8px;
				margin: 3px;
			}
			h5.mui-content-padded {
				margin-left: 3px;
				margin-top: 20px !important;
			}
			h5.mui-content-padded:first-child {
				margin-top: 12px !important;
			}
			#showUserPicker{
				border: 0px solid white;
			}
		</style>
	</head>
	<body>
	<form action="select" method="post">
		<div class="my">
			<div class="myy">
				<a href="myinfo"><img src="img/尖括号-左.png"/></a>
				<span>我的资料</span>
			</div>
			<div class="hous">
				<ul>
					<li>
						<a href="#"><span>当前小区</span></a>
					</li>
					<li>
						<a href="#"><span>游客俱乐部</span></a>
					</li>
					<li><img src="img/切换.png"></li>
				</ul>
			</div>

			<div class="tux">
					<a href="#"><span style="margin-top: 40px;">头像</span></a>
					<a href="#"><img src="img/${seleuser.userHead}"></a>
					<a href="#" class="angle"><img src="img/尖括号-右.png"></a>
			</div>

			<div class="name">
				<ul>
					<li>
						<a href="doname?userId=${seleuser.userId}">
							<span>昵称</span>
							<input name="userName" value="${seleuser.userName}" class="name-t"/>
							<img src="img/尖括号-右.png" class="name-n"/>
						</a>
					</li>
					<li>
						<a href="#">
							<span>性别</span>
							<button id='showUserPicker' class="mui-btn mui-btn-block"><div id='userResult' class="ui-alertt" name="" style="width: 100%;margin-left:0px;margin-top: -0px;background-color: white;">${seleuser.userSex}</div></button>
                            
                            <img src="img/尖括号-右.png" />
						</a>
					</li>
					<li style="margin-top: 10px;">
						<a href="#">
							<span class="mui-content-padded">出生年月</span>
							<span style="margin-left: 60px;">
							<button id='demo2' data-options='{"type":"date","beginYear":2014,"endYear":2020}' class="btn mui-btn mui-btn-block" style="border: 0px;font-size: 20px;">${seleuser.userBirthday}</button></span>
							<img src="img/尖括号-右.png" />
							<div class="mui-content">
							<div id='result' class="ui-alert"></div>
						</a>
					</li>
					<li>
						<a href="#">
							<span>兴趣爱好</span>
							<span style="margin-left: 80px;">请选择兴趣爱好</span>
							<img src="img/尖括号-右.png" />
						</a>
					</li>
				</ul>
			</div>
			
		</div>
	</form>
		<script type="text/javascript" src="js/jquery-1.12.4.js"></script>
		<script src="js/bootstrap.min.js"></script>
		
		<script type="text/javascript" src="js/mui.min.js" ></script>
		<script type="text/javascript" src="js/mui.picker.min.js"></script>
		<script src="js/update.js" type="text/javascript" charset="utf-8"></script>
		<script src="js/jquery.min.js?v=2.1.4"></script>
		<script src="js/mui.picker.js"></script>
		<script src="js/mui.poppicker.js"></script>
		<script src="js/city.data.js" type="text/javascript" charset="utf-8"></script>
		<script src="js/city.data-3.js" type="text/javascript" charset="utf-8"></script>
		
		
			
		<script>
			
			
			(function($, doc) {
				$.init();
				$.ready(function() {
					/**
					 * 获取对象属性的值
					 * 主要用于过滤三级联动中，可能出现的最低级的数据不存在的情况，实际开发中需要注意这一点；
					 * @param {Object} obj 对象
					 * @param {String} param 属性名
					 */
					var demo2 = $('#userResult')[0];
					var _getParam = function(obj, param) {
						return obj[param] || '';
					};
					//普通示例
					var userPicker = new $.PopPicker();
					userPicker.setData([{
						
						text: '男'
					}, {
						
						text: '女'
					
					}]);
					var showUserPickerButton = doc.getElementById('showUserPicker');
					var userResult = doc.getElementById('userResult');
					showUserPickerButton.addEventListener('tap', function(event) {
						userPicker.show(function(items) {
							userResult.innerText = JSON.stringify(items[0].text);
							//返回 false 可以阻止选择框的关闭
							//return false;
						});
					}, false);
					//-----------------------------------------
					//级联示例
					
					//-----------------------------------------
					//					//级联示例
					
				});
			})(mui, document);
			
			
			
			(function($) {
				$.init();
				
				var demo2 = $('#demo2')[0];
				var btns = $('.btn');
				btns.each(function(i, btn) {
					btn.addEventListener('tap', function() {
						var _self = this;
						if(_self.picker) {
							_self.picker.show(function (rs) {
								demo2.innerText = rs.text;
								_self.picker.dispose();
								_self.picker = null;
							});
						} else {
							var optionsJson = this.getAttribute('data-options') || '{}';
							var options = JSON.parse(optionsJson);
							var id = this.getAttribute('id');
							/*
							 * 首次显示时实例化组件
							 * 示例为了简洁，将 options 放在了按钮的 dom 上
							 * 也可以直接通过代码声明 optinos 用于实例化 DtPicker
							 */
							_self.picker = new $.DtPicker(options);
							_self.picker.show(function(rs) {
								/*
								 * rs.value 拼合后的 value
								 * rs.text 拼合后的 text
								 * rs.y 年，可以通过 rs.y.vaue 和 rs.y.text 获取值和文本
								 * rs.m 月，用法同年
								 * rs.d 日，用法同年
								 * rs.h 时，用法同年
								 * rs.i 分（minutes 的第二个字母），用法同年
								 */
								demo2.innerText =rs.text;
								/* 
								 * 返回 false 可以阻止选择框的关闭
								 * return false;
								 */
								/*
								 * 释放组件资源，释放后将将不能再操作组件
								 * 通常情况下，不需要示放组件，new DtPicker(options) 后，可以一直使用。
								 * 当前示例，因为内容较多，如不进行资原释放，在某些设备上会较慢。
								 * 所以每次用完便立即调用 dispose 进行释放，下次用时再创建新实例。
								 */
								_self.picker.dispose();
								_self.picker = null;
							});
						}
						
					}, false);
				});
				
			})(mui);
		</script>
		
	</body>
</html>
